<script setup lang="ts">
import { ref } from "vue"
import TakingPictures from "@/components/ExifComponents/TakingPictures.vue";

// import { RouterLink, RouterView } from 'vue-router'

const show = ref(false);
const showPopup = () => {
  show.value = true;
};

</script>

<template>
  <div id="app">
    <!-- <transition :name="transitionName"> -->
    <!-- <keep-alive>
      <router-view class="view" :key="$route.fullPath"></router-view>
    </keep-alive> -->
    <!-- </transition> -->
    <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </router-view>

    <div class="tab-bar">
      <router-link class="tab-bar-item icon-home" tag="div" to="/home">
        <i></i>
        首页
      </router-link>
      <router-link class="tab-bar-item icon-concern" tag="div" to="/concern">
        <i></i>
        关注
      </router-link>
      <div class="tab-bar-item icon-upload">
        <!-- <i></i> -->
        <i @click="showPopup"></i>
        <van-popup v-model:show="show" closeable close-icon-position="bottom-left" position="bottom">
          <taking-pictures />
        </van-popup>
      </div>
      <router-link class="tab-bar-item icon-fair" tag="div" to="/fair">
        <i></i>
        市集
      </router-link>
      <router-link class="tab-bar-item icon-user" tag="div" to="/user">
        <i></i>
        我的
      </router-link>
    </div>
  </div>
</template>

<style scoped lang="scss">
#app {
  .tab-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 55px;
    z-index: 9;
    background-color: #fffbfa;

    .tab-bar-item {
      flex: 1;
      padding: 5px;
      color: #b2b2b2;
      font-size: 12px;
      display: flex;
      flex-flow: column nowrap;
      justify-content: space-around;
      align-items: center;
      text-align: center;
      background-size: 40px 40px;
      background-repeat: no-repeat;
      background-position: center center;
      text-decoration: none;

      i {
        width: 35px;
        height: 35px;
        background-repeat: no-repeat;
        display: block;
        background-size: contain;
      }

      &.icon-home {
        i {
          background-image: url(./assets/images/tabbar/ZbZ.png);
        }
      }

      &.icon-concern {
        i {
          background-image: url(./assets/images/tabbar/_KR.png);
        }
      }

      &.icon-upload {
        i {
          width: 45px;
          height: 45px;
          background-image: url(./assets/images/tabbar/akw.png);
        }

        .van-popup__close-icon {
          background-image: none;
          margin-left: 145px;
        }
      }

      &.icon-fair {
        i {
          background-image: url(./assets/images/tabbar/KBH.png);
        }
      }

      &.icon-user {
        i {
          background-image: url(./assets/images/tabbar/ySk.png);
        }
      }

      &.router-link-active {
        color: #000000;

        &.icon-home {
          i {
            background-image: url(./assets/images/tabbar/n4Y.png);
          }
        }

        &.icon-concern {
          i {
            background-image: url(./assets/images/tabbar/i-M.png);
          }
        }

        &.icon-fair {
          i {
            background-image: url(./assets/images/tabbar/qgs.png);
          }
        }

        &.icon-user {
          i {
            background-image: url(./assets/images/tabbar/Mc2.png);
          }
        }
      }
    }
  }

  ::-webkit-scrollbar {
    width: 0 !important;
  }

  ::v-deep(.van-popup__close-icon) {
    background-image: none;
    margin-left: 145px;
  }
}
</style>
